<template>
    <view>
        <HeaderBar backgroundColor="#f5f5f5" textColor="#666" isFixed="true" title="联系我们">
        </HeaderBar>
        <view class="shopInfo">
            <view class="shopitem"><span class="tips">如果您感兴趣，欢迎联系我们！包邮给您送到家</span></view>
            <view class="shopitem"><span class="subtit">联系人</span><span class="subdec">小李</span></view>
            <a href="tel:18959652086" class="shopitem"><span class="subtit">电话</span><span class="subdec tel">18959652086</span></a>
            <view class="shopitem"><span class="subtit">地址</span><span class="subdec">厦门市</span></view>
        </view>
         <nut-swiper
            :init-page="2"
            :auto-play="3000"
            pagination-visible
            pagination-color="#426543"
            pagination-unselected-color="#808080"
        >
            <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
            <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
            </nut-swiper-item>
        </nut-swiper>
        <view class="lastfoot">
            <Foot/>
        </view>
    </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue';
import Foot from "@/components/Foot"

export default {
    components: {
        HeaderBar,
        Foot
    },

    data() {
        return {
        list:[
        'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
        'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
        'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
        'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
        ]
        
        }
    },
    methods:{
        
    }
}
</script>

<style scoped lang="less">
.shopInfo {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top:50px;
    border-radius: 20px;
    box-shadow: 6px 10px rgba(26, 200, 79, 0.905);
    background: #79848d;

    .shopitem {
        .tips {
            color: #b1e81a;
        }

        margin-bottom:10px;

        .subtit {
            margin-right: 15px;
            color: #fff;
            line-height: 18px;
            font-size: 18px;
        }

        .subdec {
            color: #eedcdc;
            font-weight: 500;
            font-size: 20px;
        }
        .tel{
            text-decoration:underline;
            color:#cbced1;
        }
    }
}
</style>